<template>
<div class="container">
    <div class="row">
       <p><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" v-on:click="AddGroupItem()">新增</button></p> 
    </div>
    <div class="row">
<table class="table">
  <thead class="thead-light">
    <tr>     
      <th scope="col">角色</th>
      <th scope="col">操作</th>
      <th scope="col">描述</th>            
      <th scope="col">编辑</th>
      <th scope="col">删除</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(item, index) in items">
        <td>{{ item.name }}</td>
        <td>
            <b-badge variant="info" v-for="operation in item.operations" :key="operation.id" v-text="operation.name"></b-badge>
          </td>
        <td>{{ item.description }}</td>        
        <td><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#exampleModal" v-on:click="editGroupItem(index)">编辑</button></td>
        <td><button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#exampleModalCenter" v-on:click="removeGroupItem(index)">删除</button></td>
    </tr>      
</tbody>
</table>


    <ul v-if="paginator.total > 0" class="pagination">
            <li v-if="paginator.prev_page_url" class="page-item"><a class="page-link" v-on:click="goToPage(paginator.prev_page_url)" rel="prev">&lsaquo;</a></li>   
            <li v-else class="page-item disabled"><span class="page-link">&lsaquo;</span></li>
            <select class="form-control custom-select" v-model="paginator.current_page" @change="goPage">
                    <option v-for="index in paginator.last_page" v-bind:value="index">{{ index }}</option>
            </select>
            <li  v-if="paginator.next_page_url" class="page-item"><a class="page-link" v-on:click="goToPage(paginator.next_page_url)"  rel="next">&rsaquo;</a></li>
            <li  v-else class="page-item disabled"><span class="page-link">&rsaquo;</span></li>
    </ul>


<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">提示</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        确定要删除角色<code>{{ selectItem.name }}</code>?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" v-on:click="ConfirmRemoveGroupItem()">确定</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">{{ actionName }}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <b-form @submit="updateGroupItem" @reset="onReset" v-if="show">
          <div class="form-group">
            <label for="group-name" class="col-form-label">角色名称:</label>
            <input type="hidden" class="form-control" id="group-id" v-model="selectItem.id">
            <b-form-input type="text" class="form-control" id="group-name" required v-model="selectItem.name"></b-form-input>
          </div>

          <b-form-group label="关联<code>操作</code>:">
            <b-form-checkbox-group id="group-operation" name="group-operation" value-field="id" text-field="name" v-model="multipleSelect" :options="operations">
              </b-form-checkbox-group>
          </b-form-group>


          <b-form-group label="角色描述:">
            <b-form-input class="form-control" id="group-description" required v-model="selectItem.description"></b-form-input>
          </b-form-group>

          <b-button type="submit" variant="primary" v-on:click="updateGroupItem()" >提交</b-button> <b-button type="reset" v-if="!isEdit" variant="danger">重置</b-button> 
        </b-form>
      </div>
      <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>   
      </div>
    </div>
  </div>
</div>


    </div>
</div>
</template>

<script>
    export default {
    	data(){
    		return {
                actionName:'编辑_角色',
                selectItem:{},
                multipleSelect:[],
                oldOperations:[],
                operations:[],
                show:true,
                isEdit:false,
                selectIndex:-1,
                paginator:{},
    			items:[]
    		}
    	},
        mounted() {
            this.goToPage('/rbac/role/apiIndex');
            console.log('Component mounted.')
        },
        methods: {  
            AddGroupItem : function(){
                this.actionName='新增_角色';
                this.selectItem={};
                this.multipleSelect=[];
                this.oldOperations=[];
                this.isEdit=false;
            },onReset (evt) {
              evt.preventDefault();
              /* Reset our form values */
              this.selectItem = {};
              /* Trick to reset/clear native browser form validation state */
              this.show = false;
              this.$nextTick(() => { this.show = true });
            },
            editGroupItem : function(index){
                const items=this.items;
                const selectItem = Object.assign({},items[index]);
                this.selectItem=selectItem;
                this.selectIndex=index;
                this.isEdit=true;
                this.actionName='编辑_角色';
                var multipleSelect=[];
                for (var i = selectItem.operations.length - 1; i >= 0; i--) {
                   multipleSelect[i]=selectItem.operations[i].id;
                }
                this.oldOperations=Object.assign({},multipleSelect);
                this.multipleSelect=multipleSelect;
            }, 
            ConfirmRemoveGroupItem : function (){
                console.log(this.selectIndex);
                const selectItem=this.items[this.selectIndex];
                var that=this;
                axios.post('/rbac/role/apiDelete/'+selectItem.id)
                  .then(function (response) {                
                    that.items.splice(that.selectIndex,1);                
                    $('#exampleModalCenter').modal('hide');
                  })
                  .catch(function (error) {
                    console.log(error);
                  });
            },
            updateGroupItem : function (evt){
               evt.preventDefault();
                var that=this;
                axios.post('/rbac/role/apiStore', {
                    operations:that.multipleSelect,
                    oldOperations:that.oldOperations,
                    id:that.selectItem.id,
                    name:that.selectItem.name,
                    description:that.selectItem.description
                  })
                  .then(function (response) { 
                    if(that.selectItem.id){
                      that.selectItem=response.data;              
                      that.items[that.selectIndex]=that.selectItem;           
                    }else{
                      that.items.push(response.data);
                    }
                               
                    $('#exampleModal').modal('hide');
                  })
                  .catch(function (error) {
                    console.log(error);
                  });
            }, 
            removeGroupItem : function (index) {
                this.selectIndex=index;
            },
            goPage : function (event){
                var url=this.paginator.path+'?page='+this.paginator.current_page;
                this.goToPage(url);
            },
            goToPage : function (url){
                console.log(url);
                var that=this;
                axios.get(url)
                 .then(function (response) {
                    that.items=response.data.data.data;
                    that.operations=response.data.operations;
                    that.paginator={
                        current_page:response.data.data.current_page,
                        first_page_url:response.data.data.first_page_url,
                        from:response.data.data.from,
                        to:response.data.data.to,
                        last_page:response.data.data.last_page,
                        last_page_url:response.data.data.last_page_url,
                        next_page_url:response.data.data.next_page_url,
                        path:response.data.data.path,
                        per_page:response.data.data.per_page,
                        prev_page_url:response.data.data.prev_page_url,
                        total:response.data.data.total,
                    };
                 })
                 .catch(function (error) {
                    console.log(error);
                 });
            }
        }
    }
</script>
